<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>尤迈桃李会</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.min.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/login.css">
    <script>(function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/96d8f960b261e49515450f8953b044bc5/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();</script>
</head>
<body>
    <div class="login-wrapper register-wrapper plr15" id="registerBox">
        <div class="tit">快速注册</div>
        <form method="post" onsubmit="register();return false;" action="#" id="registerForm" autocomplete="off">
            <ul class="list">
                <li><span class="phone-pre">+86</span><input class="input" name="loginMobile" type="text" placeholder="请输入手机号码"></li>
                <li class="flex-btw">
                    <input class="input" name="checkCode" type="text" placeholder="请输入手机验证码">
                    <span class="get-code-btn" id="getCodeBth">获取验证码</span>
                </li>
                <li class="flex-btw">
                    <input class="input" type="text" placeholder="请输入验证码" id="code">
                    <!-- <img class="verify-img" src="image/placeholder/1.jpg" alt=""> -->
                    <canvas class="verify-img" id="codeCanvas" width="176" height="72"></canvas>
                </li>
            </ul>
            <div class="other-btns no-code">
                <a href="#">收不到验证码？</a>
            </div>
            <ul class="list">
                <li><input class="input" name="shareCode" type="text" placeholder="邀请码"></li>
            </ul>
            <div class="agreement">
                登录即同意尤迈桃李会
                <a href="#">用户协议</a>和<a href="#">隐私政策</a>
            </div>
            <input class="pub-submit-btn" type="submit" value="立即注册">
            <input class="pub-submit-btn wechat-btn" type="button" id="wechatBtn" value="微信一键注册">
            <p class="tip">使用微信注册可在微信上收到重要提醒</p>
        </form>
    </div>
    
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-weui.min.js"></script>
    <script src="js/md5.js"></script>
    <script src="js/public.js"></script>
    <script>
        // 微信一键注册
        var code = getQueryString('code');
        var shareCode =  getQueryString('shareCode');
        if(code){
            getOpenid();
        }else {
            $('#wechatBtn').click(function(){
                getWxopenid();
            })
        }

        if(shareCode){
            $('[name=shareCode]').val(shareCode)
        }

        // 手机号注册
        var regStatus = false;
        function register(){
            if(regStatus) return;
            var option = $('#registerForm').serializeObject();
            // 数据验证
            if(validEmpty(option.loginMobile, '手机号不能为空')) return;
            if(validEmpty(option.checkCode, '手机验证码不能为空')) return;
            if(validPhone(option.loginMobile)) return;
            var code = $('#code').val();
            if(validEmpty(code, '验证码不能为空')) return;
            if(code.toLowerCase() != codeText){
                toast('验证码输入错误');
                return;
            }

            // 请求接口
            regStatus = true;
            http('/user/registUser', {
                loading: true,
                hasToken: false,
                data: option,
                success: function(res){
                    if(res.code === '01'){
                        toast('注册成功');
                        setCookie('token', res.data.token);
                        setCookie('userId', res.data.userId, 1);
                        localStorage.setItem("mobile", option.loginMobile);
                        setTimeout(function(){
                            window.location.replace('login-pass-set.html');
                        }, 1000)
                    }
                },
                complete: function(){
                    regStatus = false;
                }
            })
        }

        // 发送验证码
        var sendStatus = false;
        $('#getCodeBth').click(function(){
            if(sendStatus) return;
            var phone = $.trim($('[name=loginMobile]').val());
            // 数据验证
            if(validEmpty(phone, '手机号不能为空')) return;
            if(validPhone(phone)) return;

            sendStatus = true;
            getCode($(this), phone, 'regist')
        })

        // 图片验证码
        var canvas = document.getElementById('codeCanvas'),
            text = canvas.getContext('2d'),
            arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'],
            len = arr.length,
            codeText = '';
        function drawCodeImage(){
            // text.strokeRect(0, 0, 120, 40);
            for (var i = 0; i < 4; i++) {
                var x = i * 28 + 32,
                    y = 32 + 20 * Math.random(),
                    index = Math.floor(Math.random() * len);
                text.font = "bold 40px 微软雅黑";
                text.translate(x, y);
                var deg = Math.random() * 45 * Math.PI / 180;
                text.rotate(deg);//使画布旋转任意角度实现验证码不规则旋转
                codeText += arr[index];
                text.fillText(arr[index], 0, 0);//填充文字
                text.rotate(-deg);
                text.translate(-x, -y);
                text.fillStyle = color();
 
            }
            for (var i = 0; i < 8; i++) {
                text.beginPath();
                text.moveTo(Math.random() * 88, Math.random() * 72);
                text.lineTo(Math.random() * 88, Math.random() * 72);
                text.strokeStyle = color();
                text.stroke();
                text.beginPath();
                text.moveTo(Math.random() * 88 + 88, Math.random() * 72);
                text.lineTo(Math.random() * 88 + 88, Math.random() * 72);
                text.strokeStyle = color();
                text.stroke();
            }
            for (var i = 0; i < 20; i++) {
                text.beginPath();
                var x = Math.random() * 176;
                var y = Math.random() * 72;
                text.moveTo(x, y);
                text.lineTo(x + 1, y + 1);
                text.strokeStyle = color();
                text.stroke();
            }
        }

        canvas.onclick = function () {
            text.clearRect(0, 0, 176, 72)//清除画布
            codeText = '';
            drawCodeImage();
        }

        //获取随机颜色
        function color() {
            var r = Math.floor(Math.random() * 255),
                g = Math.floor(Math.random() * 255),
                b = Math.floor(Math.random() * 255);
            return `rgb(${r},${g},${b})`;
        }

        drawCodeImage();
    </script>
</body>
</html>